<template>
    
            <div class="common-layout">
    <el-container>

      <el-aside width="180px">
    <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    router
    >

    <el-menu-item :index="1">
      <el-icon><document /></el-icon>
      <span>导航一</span>

    </el-menu-item>
  
  </el-menu>
      
      

      
      
      </el-aside>
      <el-container>

        <el-header>
        
        
          <div>当前人员：<strong>{{ userInfo.sysUser.username }}</strong></div>

          
                <el-dropdown class="content"   placement="bottom-end" >
                    <span class="el-dropdown__box">

                        <el-avatar :src="userInfo.sysUser.avatar" />
                        <!-- <el-icon>
                            <CaretBottom />
                        </el-icon> -->
                    </span>
                    <template >
                        <el-dropdown-menu>
                            <el-dropdown-item @click="updateSysUSerInfo" :icon="User">修改信息</el-dropdown-item>
                            <el-dropdown-item @click="updateAvatar" :icon="Crop">更换头像</el-dropdown-item>
                            <!-- <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item> -->
                            <el-dropdown-item @click="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
        
        </el-header>
        
        <el-main>
        <router-view/>
        <el-upload v-show="cropAvatar"
    class="avatar-uploader"
    action="http://182.92.87.91:8500/user/sys/updateAvatar"
    :headers="getUser"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <img v-if="userInfo.sysUser.avatar" :src="userInfo.sysUser.avatar" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>


        </el-main>

        <el-footer>
          
          
        底部
        
        
        </el-footer>

      </el-container>
    </el-container>
  </div>

</template>

<script lang="ts" setup name="Layout">
import { ref ,onMounted} from 'vue'
import {api} from '@/utils/request'
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router'
import  useToeknStore from '@/stores/useToken'
import { getSysUserInfoApi} from '@/api/SysLogin'


import {updateAvatarApi,logoutApi} from '@/api/SysUser'
// 引入element-plus图标
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom,
    Document,
  Menu as IconMenu,
  Location,
  Setting
} from '@element-plus/icons-vue'

const router = useRouter()

const useToken=useToeknStore()


// 获取到的用户信息
const userInfo = ref({
  permissions: [],
  roles: [],
  sysUser: {
    avatar: '',
    username: '',
    password: '',
    phone: '',
    createTime: '',
    updateTime: '',
    id: undefined,
    isDeleted: undefined,
    status: undefined,
    description: '',
    name: ''
  }
})



// 进入页面时获取用户信息
onMounted(()=>{
  getUserInfo()
})

// 上传头像的按钮
const cropAvatar = ref(false)


const getUserInfo = async() => {
let data:any=await getSysUserInfoApi()
console.log('@',data);
userInfo.value=data.data

}

const getUser = ref({
  token: useToken.token
})

// 修改用户信息
const updateSysUSerInfo=async()=>{


}


// 上传用户头像
const updateAvatar=()=>{
cropAvatar.value=true
}

// 退出登录
const logout=async()=>{
  let data:any=await logoutApi()
  if(data.code===200){
    useToken.removeToken()
    router.replace({name:'login'})
    ElMessage('退出成功')

  }else{
    ElMessage.error('退出失败')}
}

const testHello = async() => {
  let data:any= await api.get("/test/hello")
if(data.code===200){
  ElMessage('有权限')
}
else{
  ElMessage.error('没有权限')
}
}


// const UserTest = async() => {
//   let data:any= await getUserTest()
// if(data.code===200){
//   ElMessage('能测到')
//   }
//   else{
//   ElMessage('不能测到')
//   }
// }

const handleAvatarSuccess=(Response:any,uploFile:any)=>{
console.log('上传头像成功',Response.data);

userInfo.value.sysUser.avatar=Response.data
ElMessage('头像上传成功')
cropAvatar.value=false
getUserInfo()
}
</script>

<style lang="scss" scoped>
.el-aside {
  
// background: rgba(79, 77, 77, 0.725);
.el-menu{
  height: calc(100vh);
}

}
.el-header {

background: #fff;


}
.el-main {
background: #f0f2f5;
}
.el-footer {
background: #fff;
}
// 右上角
.content {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #f1f1f1;
            padding: 10px;
            border: 1px solid #ccc;
        }
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>